<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :style="cardStyle" :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item label="发票编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入发票编号" v-model="queryParam.invoiceNumber"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="开票日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-range-picker
                    style="width:100%"
                    v-model="queryParam.invoiceDate"
                    format="YYYY-MM-DD"
                    :placeholder="['开始时间', '结束时间']"
                    @change="onDateChange"
                    @ok="onDateOk"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发票类型">
                  <a-select placeholder="请选择发票类型" showSearch optionFilterProp="children" v-model="queryParam.invoiceType">
                    <a-select-option v-for="(item,index) in invoiceTypeList" :key="index" :value="item.id">
                      {{ item.supplier }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <!--重置 搜索 按钮-->
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
<!--                  <a @click="handleToggleSearch" style="margin-left: 8px">-->
<!--                    {{ toggleSearchStatus ? '收起' : '展开' }}-->
<!--                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
<!--                  </a>-->
                </a-col>
              </span>
              <!--展开后的更多搜索条件-->
              <template v-if="toggleSearchStatus">
<!--                <a-col :md="6" :sm="24">-->
<!--                  <a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-select placeholder="请选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator">-->
<!--                      <a-select-option v-for="(item,index) in userList" :key="index" :value="item.id">-->
<!--                        {{ item.userName }}-->
<!--                      </a-select-option>-->
<!--                    </a-select>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :md="6" :sm="24">-->
<!--                  <a-form-item label="财务人员" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-select placeholder="请选择财务人员" showSearch optionFilterProp="children" v-model="queryParam.handsPersonId">-->
<!--                      <a-select-option v-for="(item,index) in personList" :key="index" :value="item.id">-->
<!--                        {{ item.name }}-->
<!--                      </a-select-option>-->
<!--                    </a-select>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :md="6" :sm="24">-->
<!--                  <a-form-item label="单据状态" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-select placeholder="请选择单据状态" v-model="queryParam.status">-->
<!--                      <a-select-option value="0">未审核</a-select-option>-->
<!--                      <a-select-option value="9" v-if="!checkFlag">审核中</a-select-option>-->
<!--                      <a-select-option value="1">已审核</a-select-option>-->
<!--                    </a-select>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :md="6" :sm="24">-->
<!--                  <a-form-item label="单据备注" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--                    <a-input placeholder="请输入单据备注" v-model="queryParam.remark"></a-input>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
              </template>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator"  style="margin-top: 5px">
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="myHandleAdd" type="primary" icon="plus">新增</a-button>
<!--          <a-button v-if="btnEnableList.indexOf(1)>-1" icon="delete" @click="batchDel">删除</a-button>-->
<!--          <a-button v-if="checkFlag && btnEnableList.indexOf(2)>-1" icon="check" @click="batchSetStatus(1)">审核</a-button>-->
<!--          <a-button v-if="checkFlag && btnEnableList.indexOf(7)>-1" icon="stop" @click="batchSetStatus(0)">反审核</a-button>-->
          <a-button v-if="isShowExcel && btnEnableList.indexOf(3)>-1" icon="download" @click="handleExport">导出</a-button>
          <a-tooltip placement="left" title="发票模块开发中~~~ 目前只有基础功能" slot="action">
            <a-icon v-if="btnEnableList.indexOf(1)>-1" type="question-circle" style="font-size:20px;float:right;" />
          </a-tooltip>
        </div>
        <!-- table区域-begin -->
        <div>
          <!--
              ref 绑定ref Vue特有
              size 表格大小 middle为中等
              bordered 是否展示外边框和列边框
              rowKey 表格行 key 的取值，可以是字符串或一个函数
              columns 列信息
              dataSource 对应数据数组
              components 覆盖默认的 table 元素
              pagination 分页器，参考配置项或 pagination文档，设为 false 时不展示和进行分页
              scroll 横向纵向滚动
              loading 页面是否加载中
              rowSelection 列表项是否可选择，配置项
              @change 分页、排序、筛选变化时触发
          -->
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :components="handleDrag(columns)"
            :pagination="ipagination"
            :scroll="scroll"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a @click="myViewDetails(record, '票据管理', prefixNo)">查看</a>
<!--              <a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" />-->
<!--              <a v-if="btnEnableList.indexOf(1)>-1" @click="myHandleEdit(record)">编辑</a>-->
<!--              <a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" />-->
<!--              <a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => myHandleDelete(record)">-->
<!--                <a>删除</a>-->
<!--              </a-popconfirm>-->
            </span>
            <template slot="customRenderStatus" slot-scope="status">
              <a-tag v-if="status == '0'" color="red">未审核</a-tag>
              <a-tag v-if="status == '1'" color="green">已审核</a-tag>
              <a-tag v-if="status == '9'" color="orange">审核中</a-tag>
            </template>
          </a-table>
        </div>
        <!-- table区域-end -->
        <!-- 表单区域 -->
        <bill-manage-modal ref="modalForm" @ok="modalFormOk" @close="modalFormClose"></bill-manage-modal>
        <financial-detail ref="modalDetail" @ok="modalFormOk" @close="modalFormClose"></financial-detail>
        <bill-excel-iframe ref="billExcelIframe" @ok="modalFormOk" @close="modalFormClose"></bill-excel-iframe>
        <!-- 查看详情-->
        <a-modal v-model="viewDetails.visible" title="票据管理-详情" :footer="null" width="1400px">
          <!--第一列-->
          <a-row  :gutter="24">
            <!--发票编号-->
            <a-col :lg="5" :md="12" :sm="24">
              <span>发票编号: {{viewDetails.data.invoiceNumber}}</span>
            </a-col>
            <!--发票类型-->
            <a-col :lg="4" :md="12" :sm="24">
              <span>发票类型: {{viewDetails.data.invoiceTypeValue}}</span>
            </a-col>
            <!--报关单号-->
            <a-col :lg="5" :md="12" :sm="24">
              <span>报关单号: {{viewDetails.data.reportNo}}</span>
            </a-col>
            <!--选择客户OR供应商-->
            <a-col :lg="5" :md="12" :sm="24">
              <span>{{viewDetails.data.invoiceType=='1'?'客户':'供应商'}}: {{viewDetails.data.customerSupplierValue}}</span>
            </a-col>
            <!--开票日期-->
            <a-col :lg="5" :md="12" :sm="24">
              <span>开票日期: {{viewDetails.data.invoiceDate}}</span>
            </a-col>
          </a-row>
          <!--商品信息-->
          <a-card title="单据信息" :hoverable="true" size="small" style="margin-top: 20px; margin-bottom: 20px;">
            <a-table
              ref="billTable"
              size="small"
              rowKey="id"
              :columns="viewDetails.bill.columns"
              :dataSource="viewDetails.bill.data"
              :pagination="false"
            >
            <span slot="numberCustomRender" slot-scope="text, record">
              <a  @click="myHandleDetail(record)">{{record.number}}</a>
            </span>
              <template slot="customRenderStatus" slot-scope="text, record">
                <template>
                  <a-tag v-if="record.status === '0'" color="red">未审核</a-tag>
                  <a-tag v-if="record.status === '1'" color="green">已审核</a-tag>
                </template>
              </template>
            </a-table>
          </a-card>
          <!--其它信息-->
          <a-row :gutter="24" style="height: 250px">
            <a-col :lg="5" :md="12" :sm="24">
              <span>当前选中单据: {{viewDetails.data.deliveryNoteId}}</span>
            </a-col>
            <a-col :lg="4" :md="12" :sm="24">
              <span>未税金额: {{viewDetails.data.subtotal}}</span>
            </a-col>
            <a-col :lg="5" :md="12" :sm="24">
              <span>含税金额: {{viewDetails.data.totalAmount}}</span>
            </a-col>
            <a-col :lg="5" :md="12" :sm="24">
              <span>结算账户: {{viewDetails.data.invoiceAccountValue}}</span>
            </a-col>
            <a-col :lg="5" :md="12" :sm="24">
            </a-col>
          </a-row>
        </a-modal>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import BillManageModal from './modules/BillManageModal'
import {findDetailsById} from '@/api/api.js'
import FinancialDetail from './dialog/FinancialDetail'
import BillExcelIframe from '@/components/tools/BillExcelIframe'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { FinancialListMixin } from './mixins/FinancialListMixin'
import JDate from '@/components/jeecg/JDate'
import Vue from 'vue'
export default {
  name: "BillManage",
  mixins:[JeecgListMixin, FinancialListMixin],
  components: {
    BillManageModal,
    FinancialDetail,
    BillExcelIframe,
    JDate
  },
  data () {
    return {
      //查看dialog
      viewDetails:{
        visible:false,
        data:{},
        bill:{
          columns:[
            { title: '商品名称', dataIndex: 'productName',width:120},
            { title: '商品编码', dataIndex: 'productCode',width:120},
            { title: '规格型号', dataIndex: 'productModel',width:120},
            { title: '商品数量', dataIndex: 'quantity',width:120},
            { title: '商品单价', dataIndex: 'unitPrice',width:70},
            { title: '税率（百分比）', dataIndex: 'taxRate',width:100},
            { title: '含税总价', dataIndex: 'totalPrice',width:70},
            { title: '备注', dataIndex: 'remark',width:70}
          ],
          data:[],
        },
      },
      //做票时的单据类型-采购还是销售
      invoiceTypeList:[{id:'1',supplier:"销售"},{id:'2',supplier:"采购"}],
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 18,
        offset: 1
      },
      // 查询条件
      queryParam: {
        invoiceNumber: undefined,
        invoiceType: undefined,
        invoiceDate: undefined,
      },
      prefixNo: 'PJ',
      // 表头
      columns: [
        {
          title: '操作',
          dataIndex: 'action',
          width:100,
          align:"center",
          scopedSlots: { customRender: 'action' },
        },
        { title: '发票编号', dataIndex: 'invoiceNumber',width:140, ellipsis:true},
        { title: '发票类型', dataIndex: 'invoiceTypeValue',width:160},
        { title: '客户/供应商', dataIndex: 'customerSupplierValue',width:150},
        { title: '开票日期 ', dataIndex: 'invoiceDate',width:160},
        { title: '出入单据', dataIndex: 'deliveryNoteId',width:150},
        { title: '报关单号', dataIndex: 'reportNo',width:150},
        { title: '未税金额总计', dataIndex: 'subtotal',width:150},
        { title: '含税金额总计', dataIndex: 'totalAmount',width:200},
        { title: '开票人', dataIndex: 'createdBy',width:200},
        { title: '开票账户', dataIndex: 'invoiceAccountValue',width:200},
        { title: '创建日期', dataIndex: 'createdAt',width:200},
        { title: '开票备注', dataIndex: 'invoiceRemark',width:200},
      ],
      url: {
        list: "/invoice/list", //查询table数据
        delete: "/accountHead/delete",
        deleteBatch: "/accountHead/deleteBatch",
        batchSetStatusUrl: "/accountHead/batchSetStatus"
      }
    }
  },
  computed: {
  },
  created () {
    this.initSystemConfig()
    this.initRetail()
    this.initUser()
    this.initPerson()
    this.initAccount()
  },
  methods: {
    myViewDetails(record, val, prefixNo){
      this.viewDetails.visible = true;
      this.viewDetails.data = record;
      this.viewDetails.bill.data = [];
      const params = {"invoiceId":record.id}
      findDetailsById(params).then(res=>{
        this.viewDetails.bill.data = res.data;
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>